<template>
  <el-dialog v-model="dialogVisible" title="新增患者" width="600" :before-close="handleClose">
    <el-form :model="ruleForm" label-width="auto" ref="ruleFormRef" :rules="rules">
      <el-form-item label="患者姓名" prop="name"> <el-input v-model="ruleForm.name" /> </el-form-item>

      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="ruleForm.idCard" />
      </el-form-item>

      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="ruleForm.phoneNumber" />
      </el-form-item>

      <el-form-item label="医保类型" prop="insuranceType">
        <el-select v-model="ruleForm.insuranceType">
          <el-option v-for="item in yblist" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="项目分组" prop="chiefId">
        <el-select v-model="ruleForm.chiefId" placeholder=" ">
          <el-option v-for="item in xmfzlist" :key="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer savebox">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="savebutton(ruleFormRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { seekdataApi, getxmlaApi } from "@/api/system/system.js";
import { ElMessage, ElMessageBox } from "element-plus";
let dialogVisible = ref(false);
const ruleForm = ref({
  idCard: "340881199005204616",
  name: "",
  idCard: "",
  insuranceType: "",
  zetdone: "",
  chiefId: "",
  chiefId: "",
  joiningStatus: ""
});
const Propsmsg = defineProps({
  infoID: {
    type: String,
    default: ""
  }
});

const emit = defineEmits(["addConten", "xmfzlist"]);
const ruleFormRef = ref(null);
let yblist = ref([]); //医保类型
let zztdlist = ref([]); //主诊团队
let xmfzlist = ref([]); //项目分组
let fzlist = ref([]); //是否分组
const handleClose = () => {
  dialogVisible.value = false;
};
const open = () => {
  dialogVisible.value = true;
};
let resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};

const savebutton = async formEl => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit("addConten", ruleForm.value);
      dialogVisible.value = false;
      //确定数据
    } else {
      ElMessage({
        message: "请输入完整信息!",
        type: "warning"
      });
    }
  });
};

const rules = reactive({
  idCard: [{ required: true, message: "请输入", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  idCard: [{ required: true, message: "请输入", trigger: "blur" }],
  phoneNumber: [{ required: true, message: "请输入", trigger: "blur" }],
  insuranceType: [
    {
      required: true,
      message: "请选择",
      trigger: "change"
    }
  ],
  chiefId: [
    {
      required: true,
      message: "请选择",
      trigger: "change"
    }
  ]
  // joiningStatus: [
  //   {
  //     required: true,
  //     message: "请选择",
  //     trigger: "change"
  //   }
  // ]
});
const yblxlist = ref([
  {
    id: 1,
    name: "城镇职工"
  },
  {
    id: 2,
    name: "城乡居民"
  }
]);
//回显数据
const getAction = () => {
  setTimeout(() => {
    ruleForm.value = {
      idCard: "",
      name: "",
      idCard: "",
      insuranceType: "",
      zetdone: "",
      chiefId: "",
      chiefId: "",
      joiningStatus: ""
    };
  }, 10);
};
//获取下拉框数据
const fetchInsuranceData = dictType => {
  return seekdataApi({ dictType }).then(res => {
    return res.data.map(item => ({
      id: item.dictValue,
      name: item.dictLabel
    }));
  });
};
getYZlsit();
//获取下拉框数据方法封装
function getYZlsit() {
  //医保类型
  fetchInsuranceData("sys_insurance_type").then(data => {
    yblist.value = data;
  });
  //主诊团队
  fetchInsuranceData("joining_status").then(data => {
    zztdlist.value = data;
  });
  getxmlaApi().then(res => {
    xmfzlist.value = res.data;
    emit("xmfzlist", res.data);
  });
}
// 将方法暴露给父组件
defineExpose({
  open,
  getAction
});
</script>
<style scoped>
.zztdclass {
  margin-top: 10px;
}
</style>
